/**
 * Created by Ysssssss on 2021/5/2.
 */
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';
import {Col, Form, Radio, Row, Input, Select, Button} from "antd";
import ImageUpload from "@common/presentational/ImageUpload";
import {PAGE_TYPE} from "@constants/ShoppingMallDesign";
import DoubleCheck from "@common/presentational/DoubleCheck";

const initTabbarInfo = {
    text: '',
    page: '',
    iconPath: '',
    selectedIconPath: '',
    customizeIcon: false,
}

class TabbarEditInfo extends PureComponent {

    static propTypes = {
        tabbarInfo: PropTypes.object,
        index: PropTypes.number,
        editSubmit: PropTypes.func,
        deleteSubmit: PropTypes.func,
        toggleAddTabbar: PropTypes.func,
        texts: PropTypes.array
    }
    constructor(props) {
        super(props);
        this.state = {
            isEdit: !props.tabbarInfo,
            hackTabbarInfo: props.tabbarInfo ? {
               ...props.tabbarInfo,
               customizeIcon: !!props.tabbarInfo.iconPath,
            } : initTabbarInfo
        }
        this.formRef = React.createRef()
    }

    toggleEditMode (value) {
        this.setState({
            isEdit: value,
            hackTabbarInfo: value ? (this.props.tabbarInfo ? {
                ...this.props.tabbarInfo,
                customizeIcon: !!this.props.tabbarInfo.iconPath,
            } : initTabbarInfo) : this.state.hackTabbarInfo
        }, () => {
            if (!value && this.props.index < 0) {
                this.props.toggleAddTabbar()
            }
        })
    }

    submitForm (values) {
        const { index } = this.props
        this.toggleEditMode(false)
        this.props.editSubmit(values, index)
        console.log('handleSubmit', values)
    }

    handleSubmit () {
        this.formRef.current?.submit()
    }

    deleteSubmit () {
        const { index } = this.props
        this.props.deleteSubmit(index)
    }

    render () {
        const { tabbarInfo, index, texts } = this.props
        const { isEdit, hackTabbarInfo } = this.state
        return isEdit ? (
            <div className="operation-block-bg mgt-16 pd-16">
                <Form
                    ref={this.formRef}
                    name="tabbar-edit"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    initialValues={hackTabbarInfo}
                    requiredMark={false}
                    onFinish={this.submitForm.bind(this)}
                >
                    <Form.Item
                        label='名称'
                        name='text'
                        rules={[
                            { required: true, message: '请输入名称' },
                            {
                                validator: (_, value) =>
                                    texts.includes(value) ? Promise.reject(new Error(`名称已存在`)) : Promise.resolve(),
                            }
                        ]}
                        className="mgb-16"
                    >
                        <Input maxLength={5} />
                    </Form.Item>
                    <Form.Item
                        label='图标'
                        name='customizeIcon'
                        className="mgb-8"
                    >
                        <Radio.Group>
                            <Radio value={false}>默认</Radio>
                            <Radio value={true}>自定义</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        noStyle
                        shouldUpdate={(prevValues, currentValues) => prevValues.customizeIcon !== currentValues.customizeIcon}
                    >
                        { ({getFieldValue}) => getFieldValue('customizeIcon') ? (
                            <Row className="mgb-16">
                                <Col span={4}/>
                                <Col span={20}>
                                    <div className="ft-12 ft-clr-ml">支持PNG、JPG格式，不超过25KB，建议尺寸48*48PX</div>
                                    <div className="flex-vertical-top mgt-8">
                                        <div>
                                            <Form.Item
                                                labelCol={0}
                                                name="iconPath"
                                                className="mgb-4"
                                                rules={[{ required: true, message: '请上传默认图标' }]}
                                            >
                                                <ImageUpload
                                                    accept='image/png, image/jpeg, image/jpg'
                                                    maxFileSize="25k"
                                                    uploadIntro={null}
                                                    className="mg-0"
                                                />
                                            </Form.Item>
                                            <div className="ft-12 txc pdr-8">默认</div>
                                        </div>
                                        <div className="mgl-4">
                                            <Form.Item
                                                labelCol={0}
                                                name="selectedIconPath"
                                                className="mgb-4"
                                                rules={[{ required: true, message: '请上传选中图标' }]}
                                            >
                                                <ImageUpload
                                                    accept='image/png, image/jpeg, image/jpg'
                                                    maxFileSize="25k"
                                                    uploadIntro={null}
                                                    className="mg-0"
                                                />
                                            </Form.Item>
                                            <div className="ft-12 txc pdr-8">选中</div>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        ) : null }
                    </Form.Item>
                    <Form.Item
                        label='链接'
                        name='page'
                        rules={[{ required: true, message: '请选择链接' }]}
                        className="mgb-16"
                    >
                        <Select>
                            { PAGE_TYPE.map(item=>{
                                return <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                            }) }
                        </Select>
                    </Form.Item>
                    <div className="flex-row-right">
                        <Button className="mgr-16" onClick={this.toggleEditMode.bind(this, false)}>取消</Button>
                        <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
                    </div>
                </Form>
            </div>
        ) : ( index < 0 ? null : (
            <div className="flex-row-between operation-block-bg mgt-16 pd-16">
                <span>{ tabbarInfo.text }</span>
                <div className="flex-vertical-center">
                    <span className="pdl-8 pdr-8 cur-poi" onClick={this.toggleEditMode.bind(this, true)}>编辑</span>
                    { tabbarInfo.page === 'home' || tabbarInfo.page === 'owner' ? null : (
                        <DoubleCheck title="是否确认删除该导航配置"
                                     onClick={this.deleteSubmit.bind(this)}
                        >
                            <span className="pdl-8 pdr-8 cur-poi bdl-l">删除</span>
                        </DoubleCheck>
                    ) }
                </div>
            </div>
        ))
    }
}

export default TabbarEditInfo